<template>
   <div>
      <h2>基本数据类型</h2>
      {{ x }} <button @click="x++">+</button>
      {{ y }} <button @click="y++">+</button>
      {{ z }} <button @click="z++">+</button>
      <hr>
      <h2>监听对象数据类型</h2>
      <div>{{ person }}</div>
      <button @click="person.age++">change age</button>
      <button @click="person.sal++">change salary</button>
   </div>
</template>
<!-- 
   一、组合式API的侦听器的实现步骤
   1、在vue依赖包中导入watch函数
   2、通过watch函数监听各类型数据
   二、监听各类型数据的情况
   1、侦听单个基本数据类型
   语法:watch(变量名,回调函数,配置对象)
   2、监听多个数据
   语法:watch([变量名1，变量名2],([更新后变量名1，更新后变量名2],[更新前变量名1，更新前变量名2])=>{},配置对象)
   3、监听对象的变化
   语法:watch(对象名,()=>{},{})
   注意：配置对象中的deep属性是无效的，不管你设置还是不设置都没有任何作用
   4、监听对象中的属性的变化
   语法:watch(()=>对象名.属性名,回调函数,配置对象)
   5、监听对象多个属性的变化
   语法：watch([()=>对象名.属性名1,()=>对象名.属性名2],回调函数，配置对象)
-->
<script lang='ts' setup>
import {watch,ref,reactive,watchEffect} from 'vue'
let x=ref<number>(0)
let y=ref<number>(1)
let z=ref<number>(2)
interface IPerson{
   name:string
   age:number
   sal:number
}
let person=reactive<IPerson>({name:'Giles',age:28,sal:10000})
//1、监听单个基本数据类型
// watch(x,(arg1,arg2)=>{
//    console.log('监听单个基本数据类型',arg1,arg2);
// },{
//    immediate:false
// })
// //2、监听多个值
// watch([y,z],([arg1,arg2],[arg3,arg4])=>{
//    console.log('监听多个基本数据类型','更新后的y值:',arg1,'更新后的z值：',arg2,'更新前的y值:',arg3,'更新前的z值',arg4);
   
// },{
//    immediate:false
// })
//3、监听对象
// watch(person,(newval,oldval)=>{
//    console.log('监听对象的变化',newval,oldval);  
// },{
//    //deep:false//该属性没有任何作用
//    immediate:true
// })

//4、监听对象中属性的变化
// watch(()=>person.sal,(newval,oldval)=>{
//    console.log('监听对象中的属性',newval,oldval);
   
// },{
//    immediate:true
// })

// watch([()=>person.age,()=>person.sal],([newage,newsal],[oldage,oldsal])=>{
//    console.log('监听对象中多个属性的变化',newage,newsal,oldage,oldsal);
   
// })


/**
 * watchEffect首次进来会被执行一次
 * 如果要监听reactive中的某个属性的变化，需要使用对象名.属性，就会被检测到
 * 针对如下情况是不能被监听的
 * 对象：如果里面没有使用到某个属性，这个属性发生变化，不会检测
 * ref定义的基本类型
 */
watchEffect(()=>{
   console.log('watchEffect检测到了......');
   
})

</script>

<style lang='scss' scoped>
</style>